 .clearfix {
   &:after {
     content: "";
     display: table;
     clear: both;
   }
 }

 .scrollBar {
   &::-webkit-scrollbar-track-piece {
     background: #d3dce6;
   }

   &::-webkit-scrollbar {
     width: 6px;
   }

   &::-webkit-scrollbar-thumb {
     background: #99a9bf;
     border-radius: 20px;
   }
 }

 .relative {
   position: relative;
   width: 100%;
   height: 100%;
 }

 .pct(@pct) {
   width: @pct;
   position: relative;
   margin: 0 auto;
 }

 //  .triangle(@width, @height, @color, @direction) {
 //    @width: @width/2;
 //    @color-border-style: @height solid @color;
 //    @transparent-border-style: @width solid transparent;
 //    height: 0;
 //    width: 0;

 //    .triangle(@width, @height, @color, @direction) when(@direction==up) {
 //      border-bottom: @color-border-style;
 //      border-left: @transparent-border-style;
 //      border-right: @transparent-border-style;
 //    }

 //    @else if @direction==right {
 //      border-left: @color-border-style;
 //      border-top: @transparent-border-style;
 //      border-bottom: @transparent-border-style;
 //    }

 //    @else if @direction==down {
 //      border-top: @color-border-style;
 //      border-left: @transparent-border-style;
 //      border-right: @transparent-border-style;
 //    }

 //    @else if @direction==left {
 //      border-right: @color-border-style;
 //      border-top: @transparent-border-style;
 //      border-bottom: @transparent-border-style;
 //    }
 //  }